<template>
  <div class="pro-list-table">
    <ElTable ref="multipleTableRef" :border="true" :data="tableData">
      <ElTableColumn
        :label="translate('排序号')"
        prop="SortCode"
        width="auto"
      />
      <ElTableColumn :label="translate('商品编码')" prop="Code" width="90" />
      <ElTableColumn
        :label="translate('内部编码')"
        prop="InnerCode"
        width="90"
      />
      <ElTableColumn :label="translate('商品名称')" prop="Name" width="90" />
      <ElTableColumn :label="translate('规格')" prop="Spec" width="auto" />
      <ElTableColumn :label="translate('单位')" prop="Unit" width="auto" />
      <ElTableColumn
        :label="translate('原价')"
        prop="OriginPrice"
        width="auto"
      />
      <ElTableColumn
        :label="translate('特价')"
        prop="SpecialPrice"
        width="auto"
      />
      <ElTableColumn :label="translate('操作')" width="100">
        <template #default="{ row, $index }">
          <ElButton link type="danger" @click="deleteRow(row, $index)">
            {{ translate('删除') }}
          </ElButton>
        </template>
      </ElTableColumn>
    </ElTable>
    <div class="add-cs-btn">
      <el-button type="primary" @click="addPro">
        {{ translate('添加商品') }}
      </el-button>
    </div>
  </div>
  <ItemDialog
    :selected-items="tableData"
    :visible="dialogVisible"
    @close="dialogVisible = false"
    @confirm="dialogConfirm"
  />
</template>

<script lang="ts" setup>
  import { ref } from 'vue'
  import { ElTable } from 'element-plus'
  import ItemDialog from './itemDialog.vue'
  import { translate } from '@/i18n'
  const props = defineProps({
    // proListData: {
    //   type: Array,
    //   default: () => [],
    // },
    spmId: {
      type: String,
      default: '',
    },
    modelValue: {
      type: Array,
      default: () => [],
    },
  })
  const emit = defineEmits(['update:modelValue'])
  const tableData: any = ref([])
  watch(
    () => props.modelValue,
    (val) => {
      tableData.value = props.modelValue
      tableData.value.map((item: any, index: number) => {
        item.SortCode = index + 1
      })
    }
  )
  const deleteRow = (row: any, index: any) => {
    if (tableData.value.length < 2) {
      ElMessage({
        message: translate(`至少保留一项`),
        type: 'error',
      })
      return
    }
    tableData.value.splice(tableData.value.indexOf(row), 1)
    tableData.value.map((item: any, index: number) => {
      item.SortCode = index
    })
    emit('update:modelValue', tableData.value)
  }
  const dialogVisible = ref(false)
  const addPro = () => {
    dialogVisible.value = true
  }
  const dialogConfirm = (result: any) => {
    dialogVisible.value = false
    tableData.value = result.map((item: any, index: number) => {
      return {
        SPMId: props.spmId,
        InnerCode: item.InnerCode,
        Code: item.Code,
        Name: item.Name,
        Spec: item.Spec,
        Unit: item.Unit,
        OriginPrice: item.OriginPrice,
        SpecialPrice: item.SpecialPrice || item.DiscountPrice,
        SortCode: index,
      }
    })
    emit('update:modelValue', tableData.value)
  }
</script>

<style lang="scss" scoped>
  .pro-list-table {
    .condition {
      margin-bottom: 20px;

      .color_494949 {
        color: #494949;
      }

      .w164 {
        width: 164px;
      }

      .mb20 {
        margin-bottom: 20px;
      }

      .mr14 {
        margin-right: 14px;
      }
    }

    .add-cs-btn {
      display: flex;
      justify-content: center;
      margin-top: 10px;
    }
  }
</style>
